<template>
  <el-table
    :data="tableData"
    style="width: 100%"
    :row-class-name="tableRowClassName"
  >
    <el-table-column prop="id" label="ID" width="80" />
    <el-table-column prop="name" label="姓名" width="180" />
    <el-table-column prop="birthday" label="生日" width="180" />
    <el-table-column prop="sex" label="性别" width="100" />
  </el-table>
</template>

<script lang="ts" setup>
import { onMounted, reactive } from 'vue'
import { getBook } from '../js/getBook'

interface User {
  id: number;
  name: string;
  password: string;
  birthday: string;
  sex: string;
}

// 使用 reactive 创建响应式数组
const tableData = reactive<User[]>([])

onMounted(() => {
    console.log('组件已挂载，开始调用 getBook...');
    getBook(1, (data) => {
        console.log('回调成功 - 数据:', data);
        // 将后端返回的用户数据添加到表格数据中
        if (data.data) {
            tableData.push({
                id: data.data.id,
                name: data.data.userName,
                password: data.data.password,
                birthday: data.data.birthday,
                sex: data.data.sex,
            });
            console.log('表格数据已更新:', tableData);
        }
    }, (err) => {
        console.error('回调失败 - 错误:', err);
        console.error('错误响应:', err.response);
    });
})

const tableRowClassName = ({
  row,
  rowIndex,
}: {
  row: User
  rowIndex: number
}) => {
  if (rowIndex === 1) {
    return 'warning-row'
  } else if (rowIndex === 3) {
    return 'success-row'
  }
  return ''
}
</script>

<style>
.el-table .warning-row {
  --el-table-tr-bg-color: var(--el-color-warning-light-9);
}
.el-table .success-row {
  --el-table-tr-bg-color: var(--el-color-success-light-9);
}
</style>
